import React from 'react'
//组件
import {Carousel, WingBlank} from 'antd-mobile'
import { Link } from 'react-router-dom'
import Topbar from '../../components/Topbar/Topbar'
import Contents from '../../components/Contents/Contents'
import Bottombar from '../../components/Bottombar/Bottombar'
//css
import './Confession.css'
//图片
import love1 from '../../img/love1.jpg'
import love2 from '../../img/love2.jpg'
import love3 from '../../img/love3.jpg'
import love4 from '../../img/love4.jpg'


class Confession extends React.Component {

	constructor(props) {
	  super(props);
	  this.state = {
		data:[],
        src:[love1,love2,love3,love4],
        arr:['1','2','3','4']
	  };
	}
    componentDidMount(){
        const url="https://www.prebeauty.work/confession";
        fetch(url,{
            method:'GET',
            headers:{
                'content-type': 'application/json'
            }
        }).then((res)=>{
            if(res.status===200){
                res.json().then( (data)=> {
                    this.setState({
                        data:data
                    })
                    console.log(data);
                })
            }else {
                alert("出现一个问题");
            }
        })
    }
    goadd(){
        this.props.history.push('/Addconf')
    }

	render() {
        console.log(this.state.data)
        return (
            <div className="Confession">
                {/* topbar */}
                <Topbar name="桃花遇" color='pink'/>  

                {/* 轮播图 */}
                <WingBlank style={{marginLeft:'0px', marginRight:'0px'}}>
                    <Carousel cellSpacing={10} slideWidth={0.8} autoplay infinite dots={false}>
                    {
                        this.state.arr.map((val) => 
                            <img
                                key={val}
                                src={this.state.src[val-1]}
                                alt=""
                                style={{ width: '100%', verticalAlign: 'top',height:'170px'}}
                                onLoad={() => {
                                    window.dispatchEvent(new Event('resize'));
                                    this.setState({ imgHeight: 'auto' });
                                }}
                            />
                        )
                    }
                    </Carousel>
				</WingBlank>

                {/* 小跳转 */}
                <div className="linkdiv">
                    <Link className="express" to={{pathname:'/Express',state:{rol:'express',col:'#FF69B4'}}}>表白小技巧</Link>
                    <Link className="appointment" to={{pathname:'/Express',state:{rol:'appointment',col:'#F08080'}}}>约会小tips</Link>
                    <Link className="notsingle" to={{pathname:'/Express',state:{rol:'notsingle',col:'#DB7093'}}}>脱单小建议</Link>
                    <Link className="annoyance" to={{pathname:'/Express',state:{rol:'annoyance',col:'#ff9999'}}}>恋爱小烦恼</Link>
                </div>

                {/* 循环表白动态 */}
                {
                    this.state.data.map(oneC=>(
                        <Contents 
                            key={oneC.id}
                            confession={oneC}
                        /> 
                    ))
                }

                {/* 发布 */}
                <div 
                    className="iconfont icon-jia-tianchong" 
                    style={{fontSize:30,position:'fixed',bottom:50,color:'#FFAEB9',right:10,zIndex:9999}}
                    onClick={localStorage.getItem('token')?this.goadd.bind(this):()=>console.log('请先进行登录！')}
                ></div>

                {/* 页尾 */}
				<Bottombar/>
                   
            </div>
        )
    }
}

export default Confession
